<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>text</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>

	<body>
		<canvas id="canvas" width="1200" height="1200"></canvas>

		<script type="text/javascript">
			function draw() {
				var canvas = document.getElementById('canvas')
				if (!canvas.getContext) return

				var ctx = canvas.getContext('2d')
				ctx.fillRect(0, 0, 150, 150) // 使用默认设置绘制一个矩形
				ctx.save() // 保存默认状态

				ctx.fillStyle = 'red' // 在原有配置基础上对颜色做改变
				ctx.fillRect(15, 15, 120, 120) // 使用新的设置绘制一个矩形

				ctx.save() // 保存当前状态
				ctx.fillStyle = '#FFF' // 再次改变颜色配置
				ctx.fillRect(30, 30, 90, 90) // 使用新的配置绘制一个矩形

				ctx.restore() // 重新加载之前的颜色状态
				ctx.fillRect(45, 45, 60, 60) // 使用上一次的配置绘制一个矩形

				ctx.restore() // 加载默认颜色配置
				ctx.fillRect(60, 60, 30, 30) // 使用加载的配置绘制一个矩形
			}

			draw()
		</script>
	</body>
</html>
